<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
	<!-- 页面meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>在途工单</title>
	<meta name="description" content="在途工单">
	<meta name="keywords" content="在途工单">

	<!-- Tell the browser to be responsive to screen width -->
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
	<!-- Bootstrap 3.3.6 -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js" th:src="@{https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js}"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js" th:src="@{https://oss.maxcdn.com/respond/1.4.2/respond.min.js}"></script>
	<![endif]-->
	<!-- 页面meta /-->

	<link rel="stylesheet" href="../../static/plugins/bootstrap/css/bootstrap.min.css" th:href="@{/plugins/bootstrap/css/bootstrap.min.css}">
	<link rel="stylesheet" href="../../static/plugins/font-awesome/css/font-awesome.min.css" th:href="@{/plugins/font-awesome/css/font-awesome.min.css}">
	<link rel="stylesheet" href="../../static/plugins/ionicons/css/ionicons.min.css" th:href="@{/plugins/ionicons/css/ionicons.min.css}">
	<link rel="stylesheet" href="../../static/plugins/iCheck/square/blue.css" th:href="@{/plugins/iCheck/square/blue.css}">
	<link rel="stylesheet" href="../../static/plugins/morris/morris.css" th:href="@{/plugins/morris/morris.css}">
	<link rel="stylesheet" href="../../static/plugins/jvectormap/jquery-jvectormap-1.2.2.css" th:href="@{/plugins/jvectormap/jquery-jvectormap-1.2.2.css}">
	<link rel="stylesheet" href="../../static/plugins/datepicker/datepicker3.css" th:href="@{/plugins/datepicker/datepicker3.css}">
	<link rel="stylesheet" href="../../static/plugins/daterangepicker/daterangepicker.css" th:href="@{/plugins/daterangepicker/daterangepicker.css}">
	<link rel="stylesheet" href="../../static/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" th:href="@{/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css}">
	<link rel="stylesheet" href="../../static/plugins/datatables/dataTables.bootstrap.css" th:href="@{/plugins/datatables/dataTables.bootstrap.css}">
	<link rel="stylesheet" href="../../static/plugins/treeTable/jquery.treetable.css" th:href="@{/plugins/treeTable/jquery.treetable.css}">
	<link rel="stylesheet" href="../../static/plugins/treeTable/jquery.treetable.theme.default.css" th:href="@{/plugins/treeTable/jquery.treetable.theme.default.css}">
	<link rel="stylesheet" href="../../static/plugins/select2/select2.css" th:href="@{/plugins/select2/select2.css}">
	<link rel="stylesheet" href="../../static/plugins/colorpicker/bootstrap-colorpicker.min.css" th:href="@{/plugins/colorpicker/bootstrap-colorpicker.min.css}">
	<link rel="stylesheet" href="../../static/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css" th:href="@{/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css}">
	<link rel="stylesheet" href="../../static/plugins/adminLTE/css/AdminLTE.css" th:href="@{/plugins/adminLTE/css/AdminLTE.css}">
	<link rel="stylesheet" href="../../static/plugins/adminLTE/css/skins/_all-skins.min.css" th:href="@{/plugins/adminLTE/css/skins/_all-skins.min.css}">
	<link rel="stylesheet" href="../../static/css/style.css" th:href="@{/css/style.css}">
	<link rel="stylesheet" href="../../static/plugins/ionslider/ion.rangeSlider.css" th:href="@{/plugins/ionslider/ion.rangeSlider.css}">
	<link rel="stylesheet" href="../../static/plugins/ionslider/ion.rangeSlider.skinNice.css" th:href="@{/plugins/ionslider/ion.rangeSlider.skinNice.css}">
	<link rel="stylesheet" href="../../static/plugins/bootstrap-slider/slider.css" th:href="@{/plugins/bootstrap-slider/slider.css}">
	<link rel="stylesheet" href="../../static/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css" th:href="@{/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css}">
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
	<!-- 页面头部-->
	<div th:replace="common/commons :: head"></div>
	<!-- 导航侧栏 -->
	<div th:replace="common/commons :: aside"></div>
	<!-- 内容区域 -->
	<div class="content-wrapper">
		<!-- 内容头部 -->
		<section class="content-header">
			<h1>在途工单</h1>
			<ol class="breadcrumb">
				<li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
				<li><a href="#">工单管理</a></li>
				<li class="active">在途表单</li>
			</ol>
		</section>
		<!-- 内容头部 /-->

		<!-- 正文区域 -->
		<section class="content">

			<!-- .box-body -->
			<div class="box box-primary">

				<div class="box-body">

					<!-- 数据表格 -->
					<div class="table-box">

						<!--工具栏-->
						<div class="pull-left">
							<div class="form-group form-inline">
								<div class="btn-group">
									<button type="button" class="btn btn-default" title="新建" th:href="@{/handle/add.html}"><i class="fa fa-file-o"></i> 新建</button>
									<button type="button" class="btn btn-default" title="接单" onclick='confirm("你确认要接单吗？")'><i class="fa fa-check"></i> 接单</button>
									<button type="button" class="btn btn-default" title="删除" onclick='confirm("你确认要删除吗？")'><i class="fa fa-trash-o"></i> 删除</button>
									<button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
								</div>
							</div>
						</div>
						<form th:method="get" method="get" id="form">
							<input type="hidden" name="pageIndex" id="pageIndex" value="1"/>
							<div class="box-tools pull-right">
								<div class="form-group form-inline">
									<div class="form-control">区分</div>
									<select class="form-control" name="areaId" id="areaId">
										<option value="">--请选择--</option>
									</select>
									<div class="form-control">中心</div>
									<select class="form-control" name="centerId" id="centerId">
										<option value="">--请选择--</option>
									</select>
									<div class="form-control">地址</div>
									<input type="text" class="form-control input-sm" name="address" id="address">
									<a  class="btn btn-default" onclick=page(1)><i class="fa fa-search-plus"></i>查询</a>
								</div>
							</div>
						</form>
					</div>
					<!--工具栏/-->

					<!--数据列表-->
					<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
						<thead>
						<tr>
							<th class="" style="padding-right:0px;">
								<input id="selall" type="checkbox" class="icheckbox_square-blue">
							</th>
							<th>流水单号</th>
							<th>区分</th>
							<th>中心</th>
							<th>投诉用户</th>
							<th>联系方式</th>
							<th>地址</th>
							<th>派单日期</th>
							<th class="text-center">操作</th>
						</tr>
						</thead>
						<tbody id="tbody">


						</tbody>
						<!--
                <tfoot>
                <tr>
                <th>Rendering engine</th>
                <th>Browser</th>
                <th>Platform(s)</th>
                <th>Engine version</th>
                <th>CSS grade</th>
                </tr>
                </tfoot>-->
					</table>
					<!--数据列表/-->

				</div>
				<!-- 数据表格 /-->

			</div>
			<!-- /.box-body -->

			<!-- .box-footer-->

			<div class="box-footer">
				<div class="pull-left">
					<div class="form-group form-inline" id="pages">

					</div>
				</div>

				<div class="box-tools pull-right">
					<ul class="pagination" id="pageUtil">
					</ul>
				</div>

			</div>
			<!-- /.box-footer-->

		</section>
	</div>
	<!-- 内容区域 /-->

	<div th:replace="common/commons::footer"></div>
	<!--script样式 start-->
	<script src="../../static/plugins/jQuery/jquery-2.2.3.min.js" th:src="@{/plugins/jQuery/jquery-2.2.3.min.js}"></script>
	<script src="../../static/plugins/jQueryUI/jquery-ui.min.js" th:src="@{/plugins/jQueryUI/jquery-ui.min.js}"></script>
	<script>
		$.widget.bridge('uibutton', $.ui.button);
	</script>
	<script src="../../static/plugins/bootstrap/js/bootstrap.min.js" th:src="@{/plugins/bootstrap/js/bootstrap.min.js}"></script>
	<script src="../../static/plugins/raphael/raphael-min.js" th:src="@{/plugins/raphael/raphael-min.js}"></script>
	<script src="../../static/plugins/morris/morris.min.js" th:src="@{/plugins/morris/morris.min.js}"></script>
	<script src="../../static/plugins/sparkline/jquery.sparkline.min.js" th:src="@{/plugins/sparkline/jquery.sparkline.min.js}"></script>
	<script src="../../static/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js" th:src="@{/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js}"></script>
	<script src="../../static/plugins/jvectormap/jquery-jvectormap-world-mill-en.js" th:src="@{/plugins/jvectormap/jquery-jvectormap-world-mill-en.js}"></script>
	<script src="../../static/plugins/knob/jquery.knob.js" th:src="@{/plugins/knob/jquery.knob.js}"></script>
	<script src="../../static/plugins/daterangepicker/moment.min.js" th:src="@{/plugins/daterangepicker/moment.min.js}"></script>
	<script src="../../static/plugins/daterangepicker/daterangepicker.js" th:src="@{/plugins/daterangepicker/daterangepicker.js}"></script>
	<script src="../../static/plugins/datepicker/bootstrap-datepicker.js" th:src="@{/plugins/datepicker/bootstrap-datepicker.js}"></script>
	<script src="../../static/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js" th:src="@{/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js}"></script>
	<script src="../../static/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" th:src="@{/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js}"></script>
	<script src="../../static/plugins/slimScroll/jquery.slimscroll.min.js" th:src="@{/plugins/slimScroll/jquery.slimscroll.min.js}"></script>
	<script src="../../static/plugins/fastclick/fastclick.js" th:src="@{/plugins/fastclick/fastclick.js}"></script>
	<script src="../../static/plugins/iCheck/icheck.min.js" th:src="@{/plugins/iCheck/icheck.min.js}"></script>
	<script src="../../static/plugins/adminLTE/js/app.min.js" th:src="@{/plugins/adminLTE/js/app.min.js}"></script>
	<script src="../../static/plugins/treeTable/jquery.treetable.js" th:src="@{/plugins/treeTable/jquery.treetable.js}"></script>
	<script src="../../static/plugins/select2/select2.full.min.js" th:src="@{/plugins/select2/select2.full.min.js}"></script>
	<script src="../../static/plugins/colorpicker/bootstrap-colorpicker.min.js" th:src="@{/plugins/colorpicker/bootstrap-colorpicker.min.js}"></script>
	<script src="../../static/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js" th:src="@{/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js}"></script>
	<script src="../../static/plugins/bootstrap-markdown/js/bootstrap-markdown.js" th:src="@{/plugins/bootstrap-markdown/js/bootstrap-markdown.js}"></script>
	<script src="../../static/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js" th:src="@{/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js}"></script>
	<script src="../../static/plugins/bootstrap-markdown/js/markdown.js" th:src="@{/plugins/bootstrap-markdown/js/markdown.js}"></script>
	<script src="../../static/plugins/bootstrap-markdown/js/to-markdown.js" th:src="@{/plugins/bootstrap-markdown/js/to-markdown.js}"></script>
	<script src="../../static/plugins/ckeditor/ckeditor.js" th:src="@{/plugins/ckeditor/ckeditor.js}"></script>
	<script src="../../static/plugins/input-mask/jquery.inputmask.js" th:src="@{/plugins/input-mask/jquery.inputmask.js}"></script>
	<script src="../../static/plugins/input-mask/jquery.inputmask.date.extensions.js" th:src="@{/plugins/input-mask/jquery.inputmask.date.extensions.js}"></script>
	<script src="../../static/plugins/input-mask/jquery.inputmask.extensions.js" th:src="@{/plugins/input-mask/jquery.inputmask.extensions.js}"></script>
	<script src="../../static/plugins/datatables/jquery.dataTables.min.js" th:src="@{/plugins/datatables/jquery.dataTables.min.js}"></script>
	<script src="../../static/plugins/datatables/dataTables.bootstrap.min.js" th:src="@{/plugins/datatables/dataTables.bootstrap.min.js}"></script>
	<script src="../../static/plugins/chartjs/Chart.min.js" th:src="@{/plugins/chartjs/Chart.min.js}"></script>
	<script src="../../static/plugins/flot/jquery.flot.min.js" th:src="@{/plugins/flot/jquery.flot.min.js}"></script>
	<script src="../../static/plugins/flot/jquery.flot.resize.min.js" th:src="@{/plugins/flot/jquery.flot.resize.min.js}"></script>
	<script src="../../static/plugins/flot/jquery.flot.pie.min.js" th:src="@{/plugins/flot/jquery.flot.pie.min.js}"></script>
	<script src="../../static/plugins/flot/jquery.flot.categories.min.js" th:src="@{/plugins/flot/jquery.flot.categories.min.js}"></script>
	<script src="../../static/plugins/ionslider/ion.rangeSlider.min.js" th:src="@{/plugins/ionslider/ion.rangeSlider.min.js}"></script>
	<script src="../../static/plugins/bootstrap-slider/bootstrap-slider.js" th:src="@{/plugins/bootstrap-slider/bootstrap-slider.js}"></script>
	<script src="../../static/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js" th:src="@{/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js}"></script>
	<script src="../../static/plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js" th:src="@{/plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js}"></script>
	<script>
		$(document).ready(function() {
			$.ajax({
				url:"/getArea",
				type:"GET",
				dataType: "json",
				success:function (result) {

					for (var i = 0; i < result.length; i++) {
						$("#areaId").append("<option value='"+result[i].id+"'>"+result[i].name+"</option>");
					}
				}
			});
			page(1);
		});
		function page(index){
			var areaId=$("#areaId option:selected").val();
			var centerId=$("#centerId option:selected").val();
			var address=$("#address").val();
			var pageIndex=index;
			$("#tbody").html(" ");
			$.ajax({
				url:"/plan?pageIndex="+pageIndex+"&areaId="+areaId+"&centerId="+centerId+"&address="+address,
				type:"get",
				dataType:"json",
				success:function (result1) {
					var list=result1.list;
					for (var i=0;i<list.length;i++){
						$("#tbody").append("<tr><td><input name='ids' type='checkbox'></td><td>"+list[i].flowId+"</td><td>"+
								list[i].areaName+"</td><td>"+list[i].centerName+"</td><td>"+list[i].contact+"</td><td>"+
								list[i].contactTel+"</td><td>"+list[i].address+"</td><td>"+list[i].creationDate+
								"</td><td class='text-center'><a th:href=\"@{'/handle/view/' + ${order.id}}\" class=\"btn bg-olive btn-xs\">查看</a>" +
								"<button type=\"button\" class=\"btn bg-olive btn-xs\" onclick='location.href=\"#\"'>接单</button></tr>");
					}
					$("#pages").text("总共"+result1.totalPages+"页，共"+result1.totalCount+"条数据,当前是"+result1.pageIndex+"页。");
					$("#pageUtil").html("");
					if(result1.pageIndex>1){
						$("#pageUtil").append("<li><button  onclick=page(1)>首页</button></li>");
						$("#pageUtil").append("<li><button onclick=page("+(result1.pageIndex-1)+")>上一页</button></li>");
					}
					if(result1.pageIndex<result1.totalPages){
						$("#pageUtil").append("<li><button  onclick=page("+(result1.pageIndex+1)+")>下一页</button></li>");
						$("#pageUtil").append("<li><button  onclick=page("+(result1.totalPages)+")>尾页</button></li>");
					}
				}
			})
		}
	</script>
	<!--script样式 end-->

	<!--二级菜单-->
	<script>
		$(document).on('change','#areaId',function () {
			$("#centerId").html("");
			var option="<option th:value=''>--请选择--</option>";
			$("#centerId").html(option);
			var areaId=$("#areaId").val();
			if(areaId != '' && areaId!=null){
				$.ajax({
					type:"post",
					url:"/getCenters?areaId="+areaId,
					dataType:"json",
					success:function (result) {
						$("#centerId").html("");
						var options="<option value=''>--请选择--</option>";
						var centerId=$("#centerId").val();
						for (var i=0;i<result.length;i++){
							var data=result[i]
							options+="<option value='"+data.id+"' th:selected='${"+(centerId==data.id)+"}'>"+data.name+"</option>"
						}
						$("#centerId").html(options);
					}
				})
			}else if(areaId == '' || areaId==null){
				$("#centerId").html("");
				var option="<option value=''>--请选择--</option>";
				$("#centerId").html(option);
			}

		})
	</script>

</div>
</body>
</html>